<template>
	<view class="com_view">
		<view class="table">
			<u-row class="heade_line">
				<u-col v-for="item in Headers" :key="item.title" :span="item.span">
					<view class="header_box">
						<text>{{item.title}}</text>
						<view class="lev_box" v-if="item.lev">
							<view class="lev_info" v-for="key in Object.keys(item.lev)" :key="key">
								<text>{{ key }}</text>
								<text>{{ item.lev[key] }}</text>
							</view>
						</view>
					</view>
				</u-col>
			</u-row>
			
			<u-row v-for="(line,index) in tableList" :key="index" class="table_line" customStyle="margin-top: 10px">
				<u-col v-for="item in Headers" :key="item.title" :span="item.span">
					<view class="table_cell">
						<text v-if="item.type === 'text'">{{ line[item.key] }}</text>
						<view class="options_line" v-if="item.type==='options'">
						</view>
					</view>
				</u-col>
			</u-row>
			
			
		</view>
	</view>
</template>

<script>
	export default {
		name: 'contrastRank',
		props:{
			tableList:{
				type:Array,
				default: function() { return [] }
			}
		},
		data() {
			return {
				// Headers: [
				// 	{ title: '品牌', span: 2.2, key: 'title', type:'text' },
				// 	{ title: '香气质', span: 1.4, lev: {'Ⅰ':5, 'Ⅱ':10, 'Ⅲ': 15}, len: 0.5, key: 'aromaQuality', type:"options" },
				// 	{ title: '香气量',span: 1.4, lev: {'Ⅰ':5, 'Ⅱ':10, 'Ⅲ': 15}, len: 0.5, key: 'aromaVolume', type:"options" },
				// 	{ title: '透发性', span: 1.4, lev: {'Ⅰ':5, 'Ⅱ':10, 'Ⅲ': 15}, len: 0.5, key: 'transdermal', type:"options" },
				// 	{ title: '杂气', span: 1.4, lev: {'Ⅰ':5, 'Ⅱ':10, 'Ⅲ': 15}, len: 0.5, key: 'impure', type:"options" },
				// 	{ title: '浓度', span: 1.4, lev: {'Ⅰ':5, 'Ⅱ':10, 'Ⅲ': 15}, len: 0.5, key: 'density', type:"options" },
				// 	{ title: '劲头', span: 1.4, lev: {'Ⅰ':5, 'Ⅱ':10, 'Ⅲ': 15}, len: 0.5, key: 'energy', type:"options" },
				// 	{ title: '细腻程度', span: 1.4, lev: {'Ⅰ':5, 'Ⅱ':10, 'Ⅲ': 15}, len: 0.5, key: 'delicacyLevel', type:"options" },
				// 	{ title: '成团性', span: 1.4, lev: {'Ⅰ':5, 'Ⅱ':10, 'Ⅲ': 15}, len: 0.5, key: 'clustering', type:"options" },
				// 	{ title: '刺激性', span: 1.4, lev: {'Ⅰ':5, 'Ⅱ':10, 'Ⅲ': 15}, len: 0.5, key: 'thrill', type:"options" },
				// 	{ title: '干燥感', span: 1.4, lev: {'Ⅰ':5, 'Ⅱ':10, 'Ⅲ': 15}, len: 0.5, key: 'dryFeeling', type:"options" },
				// 	{ title: '甜度', span: 1.4, lev: {'Ⅰ':5, 'Ⅱ':10, 'Ⅲ': 15}, len: 0.5, key: 'sweetness', type:"options" },
				// 	{ title: '余味', span: 1.4, lev: {'Ⅰ':5, 'Ⅱ':10, 'Ⅲ': 15}, len: 0.5, key: 'aftertaste', type:"options" },
				// ]
				Headers: [
					{ title: '品牌', span: 2.2, key: 'title', type:'text' },
					{ title: '香气质', span: 0.92, key: 'aromaQuality', type:"options" },
					{ title: '香气量',span: 0.92, key: 'aromaVolume', type:"options" },
					{ title: '透发性', span: 0.92, key: 'transdermal', type:"options" },
					{ title: '杂气', span: 0.92, key: 'impure', type:"options" },
					{ title: '浓度', span: 0.92, key: 'density', type:"options" },
					{ title: '劲头', span: 0.92, key: 'energy', type:"options" },
					{ title: '细腻程度', span: 0.92, key: 'delicacyLevel', type:"options" },
					{ title: '成团性', span: 0.92, key: 'clustering', type:"options" },
					{ title: '刺激性', span: 0.92, key: 'thrill', type:"options" },
					{ title: '干燥感', span: 0.92, key: 'dryFeeling', type:"options" },
					{ title: '甜度', span: 0.92, key: 'sweetness', type:"options" },
					{ title: '余味', span: 0.92, key: 'aftertaste', type:"options" },
				]
			}
		},
		mounted() {
			
		},
		methods:{
			inputBlur(line, item) {
				console.log("line", line)
				console.log("item", item)
			}
		}
	}
</script>

<style scoped lang="scss">
	.com_view {
		width: 100%;
		display: flex;
		justify-content: center;
	}
	.heade_line {
		background-image: url(@/static/Maskgroup.png);
		display: flex;
	}
	.header_box{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 10rpx;
		color: #6C9789;
		font-weight: bold;
		.lev_box {
			margin-top: 10rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			.lev_info {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
				color: #999;
				font-weight: bold;
			}
		}
	}

	.table_line {
		display: flex;
		align-items: center;
		background-color: #f1f1f1;
	}
	.table_cell { 
		width: 100%;
		min-height: 20rpx;
		box-sizing: border-box;
		padding: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>